<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>


    <title>登录界面</title>
    <link href="./login.css" type="text/css" rel="stylesheet"/>

    <script>

    </script>
    <style>

        body{
            background-color:rgb(124, 138, 197,0.3);

        }
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin:0 auto;
            margin-top: 80px;
            width: 1000px;
            height: 600px;
            position: relative;
            background-color: #fff;
            box-shadow: gray 8px 8px 5px 5px;

        }
        .title{
            font-size: larger;
        }
        p:nth-of-type(1){
            padding-top: 70px;
        }
        p{
            padding: 20px;
            font-size: 15px;
        }
        .right{
            font-family: "楷体";
            width: 300px;
            height: 45px;
            position:absolute;
            font-weight: 700;
            font-size: 26px;
            color: white;
            left: 310px;
            top:395px;
            line-height: 45px;

        }

        input{
            height: 22px;
            background-color:rgb(147, 147, 223,0.3);
            padding-left: 23px;
        }
        p:nth-of-type(1) input{
            background-size: 10%;
            background-image: url(/img/人像.png);
            background-repeat: no-repeat;
            background-position: 5px;

        }
        p:nth-of-type(2) input{
            background-size: 10%;
            background-image: url(/img/密码.png);
            background-repeat: no-repeat;
            background-position: 5px;

        }


        .draw{
            position: relative;
            left: 0px;
            height: 600px;
            width: 500px;
            overflow: hidden;
        }
        .draw img{
            height:600px;
            position:absolute;
            left: -130px;

        }
        .land{
            height:  300px;
            width: 400px;
            position:absolute;
            top: 150px;
            right: 50px;
            text-align: center;
            z-index: 2;



        }
        button{
            width: 60px;
            height: 33px;
            font-size: 15px;
            font-weight: bold;
            background-color:rgb(147, 147, 223);
            color: white;

        }
        .login a{
            text-decoration: none;
            color: white;

        }
        span{
            position: absolute;
            top:215px;
            left: 100px;
           display: inline-block;
            margin-top: -10px;
            padding-left: 10px;
        }
        #check{
            margin-right:233px;
        }


    </style>
</head>

<body>
<div class="box">
    <form th:action="@{/login}" method="post">

        <div class="draw">

            <img src="/img/教室.jpg"/>

        </div>

        <div class="right">
            教室管理系统

        </div>

        <div class="land">
            <div class="title">
                身份验证登录
            </div>

            <p>
                用户名：<input type="text" id="u_name" placeholder="Username" name="u_user">
            </p>
            <p>
                密码：&nbsp;&nbsp;&nbsp;<input type="password" name="u_pwd" placeholder="password" id="u_pwd" >
            </p>

               <input type="checkbox" name="remember me" id="check"><span>记住我</span> <br/>



            <button class="login"><a th:href="register">注册</a></button><button class="on" style="margin-left:55px;">登录</button>

        </div>

    </form>


</div>



</body>

</html>